<template>
  <el-dialog width="500px" :close-on-click-modal="false" :title="title" :visible.sync="visible" append-to-body @close="close" class="qr">
    <img :src="imgUrl" alt="通知单二维码图片" />

    <!--
      
    <div slot="footer" class="dialog-footer">
      <el-button type="primary" @click="save">确定</el-button>
      <el-button @click="close">取消</el-button>

    </div>
    -->
  </el-dialog>
</template>

<script lang="ts">
import { Vue, Component } from 'vue-property-decorator'
import { State, namespace } from 'vuex-class'
import axios from 'axios'

@Component({
  components: {}
})
export default class DialogDetail extends Vue {
  public $refs!: {}
  //url
  

  visible: boolean = false
  title: string = '生成二维码'

  imgUrl: any = ''

  open(id, dispatchNumber) {
    let config: any = {
      method: 'get',
      url: `/api/dispatch/qrcode`,
      params: { dispatchFormId: id },
      responseType: 'blob'
    }
    axios(config).then(res => {
      const src = window.URL.createObjectURL(res) //这里也是关键,调用window的这个方法URL方法

      // window.open(src)
      //  console.log('res',res,'src',src)
      this.imgUrl = src
      this.visible = true
      const data = res
      if (navigator.msSaveOrOpenBlob) {
        let blob = data
        // let parse = decodeURIComponent(filename ? filename : response.headers['filename']) // 解码中文
        let parse = dispatchNumber + '.png'
        navigator.msSaveOrOpenBlob(blob, parse)
      } else {
        // 非ie
        // console.log(data);
        let blob = data
        let downloadElement = document.createElement('a')
        let href = window.URL.createObjectURL(blob) //创建下载的链接
        downloadElement.href = href
        //let parse = decodeURIComponent(filename ? filename : response.headers['filename']) // 解码中文
        let parse = dispatchNumber + '.png'
        downloadElement.download = parse //下载后文件名
        document.body.appendChild(downloadElement)
        downloadElement.click() //点击下载
        document.body.removeChild(downloadElement) //下载完成移除元素
        window.URL.revokeObjectURL(href) //释放掉blob对象
      }
    })
  }
  close() {
    this.visible = false
  }
}
</script>

<style lang="scss" scoped>
.qr {
  .el-dialog__wrapper {
    overflow: hidden;
    .el-dialog {
      height: 50vh;
    }
  }
}
</style>